<template>
    <a-modal title="审批流程" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
        <!-- <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
            :loading="tableLoading" :data-source="data" /> -->
        <a-form class="form" :inline="false" :model="formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }"
            size="small">
            <a-form-item label="JSON数据">
                <a-input placeholder="请输入" v-model="formData.json"></a-input>
            </a-form-item>
            <a-form-item label="审批意见">
                <a-input placeholder="请输入" v-model="formData.comment"></a-input>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script>
import request from '../../common/request'
import { complete } from "../../api/todo";
export default {
    props: {
        taskForm: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            visible: false,
            confirmLoading: false,
            selectedRowKeys: [],
            formData: {
                json: ''
            },
            tableLoading: false,
            values: {},
            columns: [
                {
                    title: '用户名',
                    dataIndex: 'nickName',
                },
                {
                    title: '部门',
                    dataIndex: 'dept',
                    customRender: (text) => {
                        return text.deptName
                    }
                },
            ],
            data: []
        };
    },
    watch: {
        'formData.comment': function (val) {
            this.$emit('setTaskForm', { key: "comment", value: val })
        },
        'formData.json': function (val) {
            var zhi = {}
            try {
                zhi = JSON.parse(val)
            } catch (error) {
            }
            this.$emit('setTaskForm', { key: "comment", value: zhi })
        },
        // 'formData.key': function (val) {
        //     this.values[this.formData.key] = this.formData.value
        //     this.$emit('setTaskForm', { key: "values", value: this.values })
        // },
        // 'formData.value': function (val) {
        //     this.values[this.formData.key] = val
        //     this.$emit('setTaskForm', { key: "values", value: this.values })
        // }
    },
    methods: {
        showModal() {
            this.visible = true;
            this.getListUser();
        },
        handleOk(e) {
            this.taskComplete()
        },
        handleCancel(e) {
            this.visible = false;
        },
        onSelectChange(selectedRowKeys) {
            console.log('', selectedRowKeys);
            let list = []
            selectedRowKeys.forEach(element => {
                list.push(this.data[element])
            });
            this.selectedRowKeys = selectedRowKeys;
            console.log(list)
            this.$emit('handleSelectionChange', list)
        },
        getListUser() {
            this.tableLoading = true
            this.listUser({ deptId: 100 }).then((res) => {
                this.data = res.rows;
                this.tableLoading = false
            })
        },
        listUser(query) {
            return request({
                url: '/system/user/list',
                method: 'get',
                params: query
            })
        },
        taskComplete() {
            this.confirmLoading = true;
            console.log(this.taskForm)
            complete(this.taskForm).then(response => {
                this.$message.success(response.msg);
                this.visible = false;
                this.confirmLoading = false;
                this.$router.go(-1)
            }).finally(() => {
                this.confirmLoading = false;
            });
        },
    }
}
</script>

<style>

</style>